<template>
	<view>
		<view class="info_warp">
			<view class="top_bx">
				<view class="form_box">
					<view class="box_bg">
						<view class="jr">
							<u-count-to :start-val="30" :end-val="1986300.36" decimals="2" color="#fff" :bold="true"></u-count-to>
						</view>
						<view class="span">
							<u-icon name="tishishuoming" custom-prefix="coolc" color="#fff" top="1" size="30"></u-icon> 预存货值（余额）
						</view>
						<view class="btnBox">
							<navigator url="/pages/user/advance_transfer" class="withdraw" hover-class="none">货值转出</navigator>
						</view>
					</view>
				</view>
			</view>
			<view class="log_box">
				<u-tabs :list="list" :is-scroll="false" activeColor="#35c877" :current="current" @change="change"></u-tabs>
			</view>
		</view>
		<view class="log_list_box">
			
			<view class="item">
				<view class="log_left">
					<view class="name">推广用户成为服务中心会员</view>
					<view class="time">2016-05-12 14:08:05</view>
				</view>
				<view class="log_right">
					<view class="jr jia">+50</view>
					<view class="tips warning">审核中</view>
				</view>
			</view>
			<view class="item">
				<view class="log_left">
					<view class="name">推广用户成为服务中心会员</view>
					<view class="time">2016-05-12 14:08:05</view>
				</view>
				<view class="log_right">
					<view class="jr jian">+150</view>
					<view class="tips success">成功</view>
				</view>
			</view>
			<view class="item">
				<view class="log_left">
					<view class="name">推广用户成为服务中心会员</view>
					<view class="time">2016-05-12 14:08:05</view>
				</view>
				<view class="log_right">
					<view class="jr jia">+50</view>
					<view class="tips warning">审核中</view>
				</view>
			</view>
			<view class="item">
				<view class="log_left">
					<view class="name">推广用户成为服务中心会员</view>
					<view class="time">2016-05-12 14:08:05</view>
				</view>
				<view class="log_right">
					<view class="jr jian">+150</view>
					<view class="tips success">成功</view>
				</view>
			</view>
			<view class="item">
				<view class="log_left">
					<view class="name">推广用户成为服务中心会员</view>
					<view class="time">2016-05-12 14:08:05</view>
				</view>
				<view class="log_right">
					<view class="jr jia">+50</view>
					<view class="tips warning">审核中</view>
				</view>
			</view>
			<view class="item">
				<view class="log_left">
					<view class="name">推广用户成为服务中心会员</view>
					<view class="time">2016-05-12 14:08:05</view>
				</view>
				<view class="log_right">
					<view class="jr jian">+150</view>
					<view class="tips success">成功</view>
				</view>
			</view>
			<view class="item">
				<view class="log_left">
					<view class="name">推广用户成为服务中心会员</view>
					<view class="time">2016-05-12 14:08:05</view>
				</view>
				<view class="log_right">
					<view class="jr jia">+50</view>
					<view class="tips warning">审核中</view>
				</view>
			</view>
			<view class="item">
				<view class="log_left">
					<view class="name">推广用户成为服务中心会员</view>
					<view class="time">2016-05-12 14:08:05</view>
				</view>
				<view class="log_right">
					<view class="jr jian">+150</view>
					<view class="tips success">成功</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '货值明细'
				}, {
					name: '转出明细'
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
	}
	.top_bx {
		width: 100%;
		height: 320rpx;
	}
	.info_warp {
		background: #fff;
		padding-bottom: 0rpx;
	}
	.form_box {
		min-height: 280rpx;
		background: linear-gradient(to right,#d46dff 0%,#b54bff 100%);
		text-align: center;
		
		.box_bg {
			width: 100%;
			position: relative;
			height: 280rpx;
			padding: 30rpx;
			
			.jr {
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 60rpx;
				color: #fff;
				font-weight: bold;
				display: block;
				overflow: hidden;
			}
			.span {
				padding-top: 2rpx;
				padding-bottom: 28rpx;
				color: #fff;
				font-size: 30rpx;
				
				.u-icon {
					margin-right: 8rpx;
				}
			}
			.withdraw_price {
				width: 100%;
				height: 92rpx;
				padding-top: 24rpx;
				color: #fff;
				position: relative;
				display: flex;
				justify-content: space-between;
				
				.price {
					font-size: 34rpx;
					font-weight: bold;
				}
				&::after {
					height: 2rpx;
					content: '';
					background: rgba($color: #fff, $alpha: 0.3);
					position: absolute;
					left: -30rpx;
					right: -30rpx;
					top: 0rpx;
				}
			}
			
			.btnBox {
				display: flex;
				justify-content: center;
				
				.withdraw {
					width: 48%;
					text-align: center;
					border: 2rpx solid #fff;
					color: #b54bff;
					background: #fff;
					font-size: 30rpx;
					padding: 12rpx 28rpx;
					border-radius: 40rpx;
				}
			}
			
			&::after {
				width: 100%;
				height: 280rpx;
				content: '';
				position: absolute;
				z-index: -1;
				left: 0px;
				top: 0px;
				background: url(~@/static/jitai/line.png) no-repeat center 0rpx;
				background-size: auto 160%;
			}
		}
	}
</style>
